<template>
    <div id="siteAdd">
        <page-header title="站点新增" />
        <page-main>
            <el-form
                ref="ruleForm"
                label-width="80px"
                :model="ruleForm"
                :rules="rules"
            >
                <el-row>
                    <el-col :span="21">
                        <el-form-item label="站点ID" prop="siteid">
                            <el-input
                                v-model="ruleForm.siteid"
                                placeholder="基站唯一标识"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="21">
                        <el-form-item label="基站名称" prop="sitename">
                            <el-input
                                v-model="ruleForm.sitename"
                                placeholder=""
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="21">
                        <el-form-item label="地市" prop="city">
                            <el-select
                                v-model="ruleForm.city"
                                clearable
                                placeholder="请选择"
                            >
                                <el-option label="崇左" value="崇左" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="21">
                        <el-form-item label="县份" prop="county">
                            <el-select
                                v-model="ruleForm.county"
                                clearable
                                placeholder="请选择"
                            >
                                <el-option label="江州区" value="江州区" />
                                <el-option label="扶绥" value="扶绥" />
                                <el-option label="宁明" value="宁明" />
                                <el-option label="大新" value="大新" />
                                <el-option label="龙州" value="龙州" />
                                <el-option label="天等" value="天等" />
                                <el-option label="凭祥" value="凭祥" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="21">
                        <el-form-item label="sim号码" prop="phone">
                            <el-input v-model="ruleForm.phone" placeholder="" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-form-item label="模板下载">
                        <a
                            style="text-decoration: none;"
                            :href="'/static/批量新增站点模板.xlsx'"
                            >批量新增站点模板.xlsx</a>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item>
                            <el-button
                                type="primary"
                                style="margin-bottom: 15px; margin-right: 15px;"
                                @click="submitForm(ruleForm)"
                            >
                                提交
                            </el-button>
                            <input id="LAY-excel-import-excel" type="file">
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </page-main>
    </div>
</template>
<script>
import LAY_EXCEL from "lay-excel";
export default {
    data() {
        return {
            token: this.$store.state.user.token,
            ruleForm: {
                siteid: "",
                sitename: "",
                city: "崇左",
                county: "",
                phone: ""
            },
            rules: {
                siteid: [
                    {
                        required: true,
                        message: "请输入站点唯一标识",
                        trigger: "change"
                    }
                ],
                sitename: [
                    {
                        required: true,
                        message: "请输入基站名称",
                        trigger: "change"
                    }
                ],
                city: [
                    { required: true, message: "请选择地市", trigger: "change" }
                ],
                county: [
                    { required: true, message: "请选择县份", trigger: "change" }
                ]
            },
            fileList: []
        };
    },
    mounted() {
        let excelImport = document.getElementById("LAY-excel-import-excel");

        excelImport.addEventListener("change", e => {
            this.handleImport(e.target.files);
        });
    },
    methods: {
        submitForm(obj) {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    this.$api
                        .post("/electricApi/datasite/?token=" + this.token, obj)
                        .then(res => {
                            console.log(res);
                            this.$message.success("添加成功");
                            this.ruleForm = {
                                siteid: "",
                                sitename: "",
                                city: "崇左",
                                county: "",
                                phone: ""
                            };
                            this.$refs.ruleForm.resetFields();
                        });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        // 批量导入
        handleImport(files) {
            let _this = this;
            LAY_EXCEL.importExcel(
                files,
                {
                    fields: {
                        siteid: "A",
                        sitename: "B",
                        city: "C",
                        county: "D",
                        phone: "E"
                    }
                },
                function(data) {
                    data[0].Sheet1.shift();
                    let submitData = data[0].Sheet1;
                    _this.batchAdd(0, submitData.length, submitData);
                }
            );
        },

        batchAdd(i, length, data) {
            const loading = this.$loading({
                lock: true,
                text: "正在导入，请稍等......",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)"
            });
            let _this = this;
            this.$api
                .post("/electricApi/datasite/?token=" + _this.token, data[i])
                .then(res => {
                    console.log(res);
                    if (++i < length) {
                        // 回调解决循环中的异步问题
                        setTimeout(() => {
                            _this.batchAdd(i, length, data);
                        }, 100);
                    } else {
                        loading.close();
                        _this.$message.success("批量导入成功");
                    }
                });
        }
    }
};
</script>
